<template>
    <div class="login-component flexRow">
        <div class="logo-container">
            <img src="@/assets/logo.png" alt="logo">
        </div>
        <div class="login-container">
            <el-form ref="form" :model="form" :rules="rules">
                <el-form-item prop="username">
                    <el-input
                        placeholder="账户名"
                        v-model="form.username">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input
                        placeholder="密码"
                        v-model="form.pwd" show-password>
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" plain class="w100p" @click="login" :loading="loading">登 录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default {
        name:'login',
        data(){
            return{
                form:{
                    username:'admin',
                    pwd:'123456'
                },
                rules:{
                    username: [
                        { required: true, message: '请填写账户名', trigger: 'blur' }
                    ],
                    pwd: [
                        { required: true, message: '请填写密码', trigger: 'blur' }
                    ]
                },
                loading:false,
                redirect: undefined,
                otherQuery: {}
            }
        },
        methods:{
            login(){
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.$store.dispatch('login').then(res=>{
                            this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
                        }).catch(err=>{
                            this.loading = false;
                        })
                    } else {
                        this.loading = false;
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getOtherQuery(query) {
                return Object.keys(query).reduce((acc, cur) => {
                    if (cur !== 'redirect') {
                        acc[cur] = query[cur]
                    }
                    return acc
                }, {})
            }
        },
        watch:{
            '$route':{
                handler(route){
                    debugger
                    const query = route.query;
                    if(query){
                        this.redirect = query.redirect
                        this.otherQuery = this.getOtherQuery(query)
                    }
                },
                immediate:true
            }
        }
    }
</script>
<style lang='scss' scoped>
.login-component{
    width: 900px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    align-items: center;
    .logo-container{
        img{
            width: 250px;
        }
    }
    .login-container{
        flex: 1;
        
        .el-form{
            width: 300px;
            margin-left: auto;
        }
    }
}
</style>